<template>
  <div class="validation_page">
    <head-top head-title="用户手机验证" :go-back=true></head-top>
    <section class="validataion_container">
      <div class="voice_tip" v-if="showVoiceTip">
        <p>电话拨打中...</p>
        <p>请留意来自 <span>10105757</span> 或者 <span>021-315754XX</span> 的电话</p>
      </div>
      <header class="validataion_header">
        <span>收不到短信？使用</span>
        <span @click.stop="sendVoice">语音验证码</span>
      </header>
      <yd-cell-group>
        <yd-cell-item>
          <yd-icon slot="icon" name="phone3" size=".8rem"></yd-icon>
          <input type="text" slot="right" placeholder="请输入手机号码" v-model="mobile" ref="mobile">
          <!-- ↓↓关键代码是这里↓↓ -->
          <yd-sendcode slot="right"
                       v-model="start1"
                       @click.native="sendCode1"
                       type="warning"
          ></yd-sendcode>
          <!-- ↑↑关键代码是这里↑↑ -->

        </yd-cell-item>
      </yd-cell-group>
      <form class="input_form">
        <input type="text" name="validate" v-model="validate" placeholder="验证码" maxlength="6">
       <!-- <span class="disable" v-if="countDown">{{countDown}} S</span>
        <span class="repost" v-else @click="recall">重新发送</span>-->
      </form>
      <div>
        <yd-button size="large" type="primary" @click.native="confrimOrder">确定</yd-button>
      </div>
    </section>
  </div>
</template>

<script>
  import headTop from 'src/components/header/head'
  import {mapGetters, mapMutations} from 'vuex'
  import {rePostVerify} from 'src/service/getData'

  export default {
    data(){
      return{
        validate: null, //验证码
        countDown: 60, //倒计时
        reCallVerify: null, //重发验证信息
        showVoiceTip: false, //显示语音验证
        type: 'sms',
        start1: false,
        mobile:''
      }
    },
    components: {
      headTop,
    },
    created(){
      this.sig = this.$route.query.sig;
    },
    computed:{
      ...mapGetters([
        'needValidation', 'cart_id', 'orderParam'
      ]),
    },
  /*  beforeDestroy(){
      clearInterval(this.timer);
    },*/
    methods:{
      ...mapMutations([
        'CHANGE_ORDER_PARAM', 'ORDER_SUCCESS'
      ]),
      sendCode1() {
        this.$dialog.loading.open('发送中...');
        setTimeout(() => {
          this.$dialog.loading.close();
          if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.mobile))){
            this.$dialog.alert({mes:'不是完整的11位手机号或者正确的手机号前七位'});
            this.$refs.mobile.focus()
            return false;
          }else{
            //将其设置为true即开始倒计时。
            this.start1 = true;
            this.$dialog.toast({
              mes: '已发送',
              icon: 'success',
              timeout: 1000
            });
            this.getData();
          }
        }, 1000);
      },
      //到计时
      count(){
        this.countDown = 60;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          this.countDown -- ;
          if (this.countDown == 0) {
            clearInterval(this.timer);
          }
        }, 1000);
      },
/*      //重新发送
      recall(){
        this.count();
        this.type = 'sms';
        this.getData();
      },*/
      sendVoice(){
        this.showVoiceTip = true;
        this.type = 'voice';
        this.getData();
      },
      //获取验证信息
       getData(){
        //没有模拟接口
         this.reCallVerify = {'validate_token':'6666abc'};
         this.checkToken = true;
       /* this.reCallVerify = await rePostVerify(this.cart_id, this.sig, this.type);*/
        if (this.reCallVerify.message) {
          this.$dialog.alert({mes:this.reCallVerify.message})
        }
      },
      confrimOrder(){
         //把验证码，令牌存入vuex中
        if(this.checkToken){
          this.CHANGE_ORDER_PARAM({validation_code: this.validate, validation_token: this.reCallVerify.validate_token});
          let orderRes = 'ok';
          this.ORDER_SUCCESS(orderRes);
          this.$router.push('/confirmOrder/payment');
        }else{
          this.$dialog.alert({mes:'请输入验证码'})
        }
      },

    },
    mounted(){
      this.count();
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../style/mixin';

  .validation_page{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f5f5f5;
    z-index: 204;
    padding-top: 1.95rem;
    p, span, input{
      font-family: Helvetica Neue,Tahoma,Arial;
    }
  }
  .determine{
    background-color: #4cd964;
    @include sc(.7rem, #fff);
    text-align: center;
    margin: 0 .7rem;
    line-height: 1.8rem;
    border-radius: 0.2rem;
    margin-top: 0.5rem;
  }
  .validataion_container{
    background-color: #fff;
    padding: .7rem;
    .validataion_header{
      span{
        @include sc(.7rem, #333);
      }
      span:nth-of-type(2){
        color: #ff6000;
      }
    }
  }
  .input_form{
    display: flex;
    *{
      @include sc(.65rem, #666);
      border-radius: 0.15rem;
    }
    input{
      flex: 3;
      height: 1.5rem;
      background-color: #eee;
      padding: 0 .6rem;
    }
    span{
      flex: 1;
      height: 1.5rem;
      display: inline-block;
      text-align: center;
      line-height: 1.5rem;
      font-size: .6rem;
    }
    .repost{
      background-color: $blue;
      color: #fff;
    }
    .disable{
      background-color: #eee;
      color: #999;
    }
  }
  .voice_tip{
    margin-bottom: .4rem;
    p{
      @include sc(.65rem, #333);
      line-height: 1rem;
      span{
        color: #ff6000;
      }
    }
  }
</style>
